<template>
  <div>
    <!-- 导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>群欢迎语</el-breadcrumb-item>
    </el-breadcrumb>


    <el-card class="box-card">
      <!-- 选项卡 -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="企业话术" name="first">
          <!-- 按钮 -->
          <div>
            <el-button size="small" icon="el-icon-plus" type="primary" @click="handleEdit">新建话术</el-button>
            <el-button size="small" @click="importShow">导入话术</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="团队话术" name="second">

        </el-tab-pane>
      </el-tabs>
    </el-card>

    <el-card class="box-card">
      <!--列表-->
      <el-row>
        <el-col span="5">
          <el-link @click="show">+ 添加分组</el-link>
          <el-tree :data="data" :props="defaultProps" accordion>
          </el-tree>
        </el-col>

        <el-col span="19">
          <el-table size="small" :data="listData" highlight-current-row v-loading="loading" element-loading-text="拼命加载中" style="width: 100%;">
            <el-table-column align="center" type="selection" width="60">
            </el-table-column>
            <el-table-column  prop="groupName" label="任务名称" width="200">
            </el-table-column>
            <el-table-column  prop="lordName" label="创建时间" width="150">
            </el-table-column>
            <el-table-column  prop="groupTag" label="扫码人数" width="200">
            </el-table-column>
            <el-table-column  prop="PeopleNum" label="拉群进度" width="120">
            </el-table-column>
            <el-table-column align="center" label="操作" min-width="150">
              <template slot-scope="scope">
                <el-button size="mini" @click="currentHandler('detail', scope.row.id)">详情</el-button>
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                <el-button size="mini" @click="">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页组件 -->
          <div style="display: flex; justify-content: flex-end;">
            <div style="width: 450px; height: 60px;">
              <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>


    <!-- 导入话术 -->
    <el-dialog title="导入话术" width="30%" :visible.sync="importFormVisible" @click="importClose">
      <div>
        1.下载导入模板，案中案模板填写内容
      </div>
      <div>
        <el-button size="mini" type="primary" @click="">确定</el-button>
      </div>
      <div>
        2.上传文件
      </div>
      <div>
        <el-button size="mini" type="primary" @click="">点击上传文件</el-button>
      </div>
    </el-dialog>


    <!-- 添加分组 -->
    <el-dialog title="新建分组" :visible.sync="formVisible" width="30%" @click="close">
      <div style="background: rgb(230,247,255); border: 1px solid rgb(165,221,255); padding: 8px; color: #999; margin-bottom: 15px;">
        企业素材下的素材，默认全部员工可见，如果需要设置部分员工可见请至团队话术下设置
      </div>

      <el-row>
        <el-col span="4">
          分组名称：
        </el-col>
        <el-col span="20">
          <el-input size="small" v-model="addGroup" placeholder="请输入标签组名称"></el-input>
        </el-col>
      </el-row>

      <el-row>
        <el-col span="4">
          可见范围：
        </el-col>
        <el-col span="20">
          全部员工
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="close">取消</el-button>
        <el-button size="mini" type="primary" @click="">确定</el-button>
      </div>
    </el-dialog>


    <!-- 新建话术 -->
    <el-dialog :title="wordsTitle" :visible.sync="wordsFormVisible" width="40%" @click="handleClosr">
      <el-form ref="form" :model="wordsForm" label-width="80px">
        <el-form-item label="分组">
          <el-select v-model="wordsForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="标题">
          <el-input v-model="wordsForm.name"></el-input>
        </el-form-item>

        <el-form-item>
          <el-radio-group v-model="wordsForm.resource">
            <el-radio label="文本"></el-radio>
            <el-radio label="图片"></el-radio>
            <el-radio label="图文"></el-radio>
            <el-radio label="PDF"></el-radio>
            <el-radio label="视频"></el-radio>
            <el-radio label="小程序"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-input type="textarea" v-model="wordsForm.desc"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleClosr">取消</el-button>
        <el-button size="mini" type="primary" @click="">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'

import ElementUI from 'element-ui'
// 全局禁止点击遮罩层关闭e-dialog弹窗
ElementUI.Dialog.props.closeOnClickModal.default = false

export default {
  data() {
    return {
      // 选项卡
      activeName: 'first',

      wordsTitle: '新建话术',

      // 添加分组显示
      formVisible: false,
      // 新建话术显示
      wordsFormVisible: false,
      // 导入话术显示
      importFormVisible: false,

      // 添加分组信息
      addGroup: '',

      // 话术编辑信息
      wordsForm: {

      },

      // 筛选
      formInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },

      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },

      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },

      // 列表数据
      listData: []
    }
  },

  // 注册组件
  components: {
    Pagination
  },

  methods: {
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },

    // 添加分组显示
    show() {
      this.formVisible = true;
    },
    // 添加分组关闭
    close() {
      this.formVisible = false;
    },

    // 话术编辑
    handleEdit: function(index, row) {
      this.wordsFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.wordsTitle = '修改'
        this.wordsForm.deptId = row.deptId
        this.wordsForm.deptName = row.deptName
        this.wordsForm.deptNo = row.deptNo
      } else {
        this.wordsTitle = '添加'
        this.wordsForm.deptId = ''
        this.wordsForm.deptName = ''
        this.wordsForm.deptNo = ''
      }
    },
    // 新建话术关闭
    handleClosr() {
      this.wordsFormVisible = false;
    },

    // 导入话术显示
    importShow() {
      this.importFormVisible = true;
    },
    // 导入话术关闭
    importClose() {
      this.importFormVisible = false;
    }
  }
}
</script>

<style scoped>
.el-card {margin-top: 25px;}
.el-link {font-size: 18px; margin-bottom: 10px; font-weight: 700; color: #222;}
.el-dialog .el-row {margin-top: 20px;}
</style>
